<template>
	<view>
		<!-- <uni-nav-bar left-icon="back" left-text="" right-text="" title='订单列表'></uni-nav-bar> -->
		<view class="sorttools">
			<view @click="change(0)" :class="str==0?'act':''">待付款</view>
			<view @click="change(1)" :class="str==1?'act':''" class="item">已付款</view>
			<view @click="change(2)" :class="str==2?'act':''" class="item">已发货</view>
			<view @click="change(3)" :class="str==3?'act':''">已收货</view>
			<view @click="change(9)" :class="str==9?'act':''">申请退款</view>
		</view>

		<view v-if="str!=9" class="order-list">
			<view v-for="item in datalist" class="orderitem">
				<view class="top">
					<text>订单编号:{{item.order.orderSn}}</text>
					<text class="status">{{typename}}</text>
				</view>
				<view @click="togoodsinfo(con.productId)" class="con" v-for="con in item.items" :key='con.id'>
					<image :src="con.productPic" mode=""></image>
					<view class="info">
						<view class="left">
							<view class="title">{{con.productName}}</view>
							<view class="">编号: 123456789</view>
							<view class="">规格: 暂无</view>
							<view class="">颜色: {{JSON.parse(con.productAttr)[0].value ? JSON.parse(con.productAttr)[0].value : '暂无'}}</view>
						</view>
						<view class="left right">
							<view class="price">￥{{con.productPrice}}</view>
							<view class="count">X{{con.productQuantity}}</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<text>时间:{{item.order.createTime}}</text>
					<text>合计: ￥{{item.order.totalAmount}}</text>
				</view>
				<view class="btns" v-if="str==0">
					<button class='btn' type="default" @click="towaitpay(item.order.id)">付款</button>
					<button class='btn' type="default" @click="cancle(item.order.id)">取消订单</button>
				</view>
				<view class="btns" v-if="str==2">
					<button class='btn' type="default" @click="confirm(item.order.id)">确认收货</button>
					<button class='btn' v-if="item.items[0].isReturn==0" type="default" @click="toback(item.order.id)">申请退货</button>
					<button class='btn' v-else type="default" style="border: 2rpx solid red;color: red;">正在退货</button>
				</view>
				<view class="btns" v-if="str==3 && item.order.status==4">
					<button class='btn' type="default" style="border: 2rpx solid red;color: red;" @click="close(item.order.id)">订单已关闭,删除记录</button>
				</view>
			</view>
		</view>


		<view v-else class="order-list">
			<view v-for="item in backlist" class="orderitem">
				<view class="top">
					<text>订单编号:{{item.orderSn}}</text>
					<text @click="tobackinfo(item.id)" class="status" :style="{'color':item.status==2?'red':'#034c46' }">{{item.status | orderProcessText}}</text>
				</view>
				<view @click="togoodsinfo(item.productId)" class="con">
					<image :src="item.productPic" mode=""></image>
					<view class="info">
						<view class="left">
							<view class="title">{{item.productName}}</view>
							<view class="">编号: 123456789</view>
							<view class="">规格: 暂无</view>
							<view class="">颜色: {{JSON.parse(item.productAttr)[0].value ? JSON.parse(item.productAttr)[0].value : '暂无'}}</view>
						</view>
						<view class="left right">
							<view class="price">￥{{item.productPrice}}</view>
							<view class="count">X{{item.productCount}}</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<text>时间:{{item.createTime}}</text>
					<text>合计: ￥{{item.returnAmount}}</text>
				</view>
			</view>
		</view>




	</view>

</template>

<script>
	import mix from "@/mixins/index.js"
	import {
		addOrderReturnApply,
		getCompanyAddrss,
		orderReturnApplys,
		uploadImg,
		orderReturn
	} from "../../../api/my/backgoods/backgoods.js"

	import {
		findAllOrders,
		cancelOrder,
		receiveDone
	} from '../../../api/my/myorder/myorder.js'
	import {
		addPreOrder,
		getPreOrderById,
		addConfirmOrder,
		payConfirm,
		deleteOrder,
	} from "../../../api/my/order/order.js"
	export default {
		mixins: [mix],
		data() {
			return {
				str: 0,
				backlist: [],
				data: [],
				alllist: [],
				type: ""
			};
		},
		filters: {
			orderProcessText(process) {
				var text = "等待处理";
				switch (JSON.stringify(process)) {
					case "0":
						text = "等待处理";
						break;
					case "1":
						text = "确认退货,等待发货";
						break;
					case "2":
						text = "已退款";
						break;
					case "3":
						text = "已拒绝";
						break;
					case "9":
						text = "拒绝退货";
						break;

					default:
						break;
				}
				return text;
			},
		},
		methods: {
			// 到退单详细页面
			tobackinfo(ids) {
				console.log(ids);
				uni.navigateTo({
					url: `../backgoods/backinfo/backinfo?id=${ids}`
				})
			},
			close(id) {
				var _this = this
				console.log(id);
				deleteOrder(id).then(res => {
					console.log(res);
					if (res.success) {
						uni.showToast({
							title: '订单关闭成功'
						})
						setTimeout(function() {
							_this.init()
						}, 1700)
					}
				})
			},
			// 到商品详细页面
			togoodsinfo(id) {
				console.log(id);
				uni.navigateTo({
					url: `../../home/goodsinfo/goodsinfo?id=${id}`
				})
			},
			// 到退款页面
			toback(ids) {
				uni.navigateTo({
					url: `../backgoods/backgoods?id=${ids}`
				})
			},
			// 到等待付款页面
			towaitpay(ids) {
				console.log(ids);
				uni.navigateTo({
					url: `../waitpay/waitpay?id=${ids}`
				})
			},
			// 取消订单
			cancle(id) {
				var _this = this
				console.log(id);
				cancelOrder(id).then(res => {
					console.log(res);
					if (res.success) {
						uni.showToast({
							title: '取消订单成功'
						})
						setTimeout(function() {
							_this.init()
						}, 1700)
					}
				})
			},
			// 确认收货
			confirm(id) {
				console.log(id);
				receiveDone({
					orderId: id
				}).then(res => {
					console.log(res);
					if (res.success) {
						uni.showToast({
							title: "确认收货成功"
						})
						var index = this.sendlist.findIndex(el => {
							return el.order.i == id
						})
						this.sendlist[index].order.status = '已收货'
						this.getlist.unshift(this.sendlist[index])
						this.sendlist.splice(index, 1)
					}
				})
			},
			// 切换订单类型
			change(type) {
				this.str = type
			},
			init() {
				// 获取非退货列表
				findAllOrders().then(res => {
					var arr = res.data.orderList
					this.alllist = res.data.orderList
				})
				// 获取退货列表
				orderReturnApplys().then(res => {
					this.backlist = res.data.items
				})
			}
		},
		onLoad(e) {
			console.log(e);
			this.str = e.type
		},
		onShow() {
			this.init()
		},
		computed: {
			datalist() {
				return this.alllist.filter(el => {
					if (this.str == 3) {
						return el.order.status == 3 || el.order.status == 4
					} else {
						return el.order.status == this.str
					}
				})
				retrun
			},
			typename() {
				if (this.str == 0) {
					return "未付款"
				} else if (this.str == 1) {
					return "已付款"
				} else if (this.str == 2) {
					return "已发货"
				} else if (this.str == 3 || this.str == 4) {
					return "已收货"
				} else {
					return "无效订单"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.backact {
		span {
			color: red;
		}
	}

	.order-list {
		margin: 100rpx auto;
	}

	.sorttools {

		width: 100%;
		position: fixed;
		left: 0;
		top: 0rpx;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		box-sizing: border-box;
		color: #fff;
		background-color: #354E44;
		padding: 20rpx 40rpx;
		display: flex;
		font-size: 28rpx;
		justify-content: space-between;
		z-index: 999;

		.act {
			height: 42rpx;
			color: #ff6700;
			box-sizing: border-box;
			position: relative;
			border-bottom: 2rpx solid #ff6700;
		}

		.item {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;

			.icons {
				padding-left: 10rpx;
				box-sizing: border-box;

				.icon {
					display: flex;
					flex-direction: column-reverse;
					justify-content: space-between;
					line-height: 20rpx;
					box-sizing: border-box;
				}
			}
		}
	}

	.orderitem {
		width: 710rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
		margin: 40rpx auto;

		.top {
			display: flex;
			justify-content: space-between;
			padding: 18rpx 0;
			border-bottom: 2rpx solid #eee;
			font-size: 24rpx;
			color: #3e3e3e;
			box-sizing: border-box;

			.status {
				color: #034c46;
				box-sizing: border-box;
			}
		}

		.con {
			padding: 30rpx 0;
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;
			border-bottom: 2rpx solid #eee;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
			}

			.info {
				width: 460rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.left {
					font-size: 22rpx;
					box-sizing: border-box;
					line-height: 30rpx;
					color: #8d8d8d;

					.title {
						width: 300rpx;
						font-size: 26rpx;
						color: #3e3e3e;
						line-height: 58rpx;
						box-sizing: border-box;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.right {
					text-align: right;

					.price {
						margin-top: 20rpx;
						font-size: 28rpx;
						box-sizing: border-box;
						color: #ff6700;
					}

					.count {
						margin-top: 10rpx;
						box-sizing: border-box;
						font-size: 24rpx;
					}
				}
			}
		}

		.bottom {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			font-size: 26rpx;
			line-height: 36rpx;
		}

		.btns {
			padding: 12rpx 0;
			height: 80rpx;
			box-sizing: border-box;

			.btn {
				height: 54rpx;
				line-height: 50rpx;
				float: right;
				box-sizing: border-box;
				margin-left: 20rpx;
				font-size: 24rpx;
				border: 1px solid #2d4f43;
				color: #2d4f43;
				background-color: rgba(0, 0, 0, 0);
			}
		}

	}
</style>
